---
title: Disclosure
description: An interactive UI component that expands or collapses content sections, improving accessibility and user experience.
order: 5
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Disclosure.html#props"]
---

## Basic
A disclosure, also known as a collapsible, is a vertical stack of headers that expand or collapse to show or hide content sections. It helps organize large amounts of information, making it easier for users to navigate and find what they need.
<How className="w-full max-w-2xs" toUse="navigation/disclosure-group/disclosure-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/disclosure
```

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='disclosure'/>

## Anatomy
```
import { Disclosure, DisclosurePanel, DisclosureTrigger } from "@/components/ui/disclosure-group";
```

```
<Disclosure>
  <DisclosureTrigger>
    Trigger
  </DisclosureTrigger>
  <DisclosurePanel>
    Content
  </DisclosurePanel>
</Disclosure>
```

## Disabled
You can disable all disclosure by setting the `isDisabled` prop.
<How className="w-full max-w-2xs" toUse="navigation/disclosure-group/disclosure-disabled-demo" />

## Controlled
You can control the disclosure by using the `isExpanded` prop.
<How className="w-full max-w-2xs" toUse="navigation/disclosure-group/disclosure-controlled-demo" />

## Accordion
If you're looking for a more advanced accordion, check out the [Disclosure Group](/docs/components/navigation/disclosure-group) component.
